<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="page">
    <van-nav-bar title="扫描条形码" left-arrow @click-left="goBack" />

    <div class="container">
      <div class="qrcode-box">
        <div id="reader"></div>
      </div>
    </div>
    <!-- <div class="btn">
      <div class="left-back">
        <van-icon name="arrow-left" @click="goBack" />
      </div>
      <div class="right-file">
        <van-uploader v-model="fileList" :preview-image="false" :after-read="dealSelectFiles">
          <van-icon name="photo-o"
        /></van-uploader>
      </div>
    </div> -->
  </div>
</template>
​
<script setup lang="ts">
import { Html5Qrcode } from 'html5-qrcode'
import { showToast } from 'vant'
import { onMounted, onUnmounted, reactive, ref } from 'vue'

const state = reactive({
  html5QrCode: null,
  fileList: []
})
const decodedText1 = ref()
const decodedResult1 = ref()
const start = () => {
  state.html5QrCode
    .start(
      { facingMode: 'environment' },
      {
        fps: 1,
        qrbox: { width: 250, height: 200 }
      },
      (decodedText, decodedResult) => {
        decodedText1.value = decodedText
        decodedResult1.value = decodedResult
        console.log('decodedText', decodedText)
        console.log('decodedResult', decodedResult)
      }
    )
    .catch((err) => {
      console.log('扫码错误信息', err)
      let message = '' // 错误信息处理仅供参考，具体描述自定义
      if (typeof err == 'string') {
        message = '二维码识别失败！'
      } else {
        if (err.name == 'NotAllowedError') {
          message = '您需要授予相机访问权限！'
        }
        if (err.name == 'NotFoundError') {
          message = '这个设备上没有摄像头！'
        }
        if (err.name == 'NotSupportedError') {
          message = '摄像头访问只支持在安全的上下文中，如https或localhost！'
        }
        if (err.name == 'NotReadableError') {
          message = '相机被占用！'
        }
        if (err.name == 'OverconstrainedError') {
          message = '安装摄像头不合适！'
        }
        if (err.name == 'StreamApiNotSupportedError') {
          message = '此浏览器不支持流API！'
        }
      }
    })
}
const getCameras = () => {
  Html5Qrcode.getCameras()
    .then((devices) => {
      if (devices && devices.length) {
        state.html5QrCode = new Html5Qrcode('reader')
        start()
        window.qrcode = state.html5QrCode
      }
    })
    .catch((err) => {
      showToast({
        message: '摄像头无访问权限！',
        duration: 3000
      })
    })
}
const stop = () => {
  state.html5QrCode
    .stop()
    .then((ignore) => {
      console.log('停止扫码', ignore)
    })
    .catch((err) => {
      console.log(err)
      showToast('停止扫码失败')
    })
}
const dealSelectFiles = (a) => {
  // console.log(e, state.html5QrCode, 78979)
  window.qrcode.callback = (result) => {
    showToast('成功了，结果是：' + result)
  } // get select files.
  let file = a.file
  // setTimeout(() => {
  //    window.qrcode .scanFile(e)
  // }, 2000)
  var reader = new FileReader()
  reader.onload = (function () {
    return function (e) {
      window.qrcode.pause()
      window.qrcode.scanFile(a.file, false)
      console.log(e, 78979)
    }
  })(file)
  reader.readAsDataURL(file)
  // try {
  // } catch (error) {
  //   showToast({
  //     message: '图片识别失败！',
  //     duration: 3000
  //   })
  // }

  // try {
  //   window.qrcode.callback = (result) => {
  //     showToast(result)
  //   }
  //   let file = e.file
  //   let reader = new FileReader()
  //   reader.onload = (function () {
  //     return function (e) {
  //       window.qrcode.decode(e.target.result)
  //     }
  //   })(file)
  //   reader.readAsDataURL(file)
  // } catch (error) {
  //   console.log(error)
  //   showToast({
  //     message: '识别失败！',
  //     duration: 2000
  //   })
  // }
}
onMounted(() => {
  getCameras()
})
onUnmounted(() => {
  //扫描设备是否在运行
  if (state.html5QrCode.isScanning) {
    stop()
  }
})
</script>

<style lang="less" scoped>
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
  position: relative;
  width: 100%;
}
.qrcode-box {
  height: 100%;
}
#reader {
  background-color: #000;
  height: 100%;
  display: flex;
}
video {
  height: 100%;
}
.btn {
  height: 46px;
  display: flex;
  justify-content: space-around;
  color: #000;
  font-size: 8vw;
  background-color: #fff;
  align-items: center;
}
#qr-canvas {
  background-color: #000 !important;
  // overflow: hidden;
}

// #reader::after {
//   position: absolute;
//   content: '';
//   width: 50%;
//   transform: translateX(50%);
//   height: 50px;
//   background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #ccc 211%);
//   border-bottom: 1px solid #ccc;
//   z-index: 999999;
//   animation: scan-animation 2s linear infinite;
// }

// @keyframes scan-animation {
//   0% {
//     top: 30%;
//   }

//   100% {
//     top: 65%;
//   }
// }
</style>
​
